import '../ui/layui.all'
import '../ui/css/layui.css'

import '../ui/css/modules/code.css'
import '../ui/css/modules/layer/default/layer.css'
import '../ui/css/modules/laydate/default/laydate.css'
import './miniMap.css'
import editModel from '../ModelControl/editModel'
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'

const miniMap = function (views) {
    this.views = views
    var self = this
    this.data = null
    var dataSource = [
        {
            "title": "转移单元"
        },
        {
            "title": "转移路线"
        },
        {
            "title": "安置区"
        },
    ];
    var options = ''
    for (let i = 0; i < dataSource.length; i++) {
        options += '<option value="">' + dataSource[i].title + '</option>';
    }

    this.temp = '<div class="cesium-widget-title">' +
        //     '<div class="title-info">图层管理</div>'+
        //     '<div class="title-btn">'+
        //         '<i class="layui-icon layer-btn layui-icon-close" data-method="close"></i>'+
        //    '</div></div>'+
        '<div class="cesium-widget-cont">' +
        '<div id="miniMapId" ></table>' +
        '</div>'
    this.contanner = this._drawWidget()
    this.editModel = new editModel(views)
    //保存所有已添加的图层
}
miniMap.prototype = {
    updateDataSet: function () {
        this.miniMapL = L.map('miniMapId').setView([51.505, -0.09], 13);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            // attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(this.miniMapL);
    },
    openWidget: function () {
        this.contanner.style.display = "block"
    },
    closeWidget: function () {
        this.contanner.style.display = "none"
    },
    initData: function (data) {
        this.data = data
        this._bind()
    },
    _drawWidget: function () {
        var dom = document.createElement("div");
        dom.className = "cesium-widget";
        dom.id = "miniMap"
        dom.innerHTML = this.temp;
        var body = document.getElementsByTagName("body")[0];
        body.appendChild(dom);
        this._bind()
        return dom
    },
    _bind: function () {
        this.updateDataSet();
        var tree = layui.tree
        var layer = layui.layer
        var self = this
        var active = {
            close: function () {
                self.closeWidget()
            }
        }
        //基本演示
        tree.render({
            elem: '#LayerTree'
            , data: this.data
            , showCheckbox: true  //是否显示复选框
            , id: 'LayerList'
            , accordion: false
            , click: function (obj) {
                var data = obj.data;  //获取当前点击的节点数据
                layer.msg('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(data));
                if (!data.children && self.layerList[data.id]) {
                    self.editModel.startEdit(self.layerList[data.id], data.position)
                }
            }
            , oncheck: function (obj) {
                var data = obj.data;  //获取当前点击的节点数据
                self.checkedLayer.apply(self, [data, obj.checked])

                // layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
            }
        });
        $('#miniMap .layer-btn').on('click', function () {
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });
    },
    checkedLayer: function (threenode, checked) {
        // var self = this
        var node = threenode
        if (node.children) {
            node.children.forEach(childNode => {
                this.checkedLayer(childNode, checked)
            });
        } else {
            layer.msg(node.title + ":" + checked);
            console.log(node.title + ":" + checked)
            if (checked) {
                this.layeradds[node.type](node)
            } else {
                this.layerremoves[node.type](node)
            }
        }
    },
    addLayer: function (layer) {

    }
}
export default miniMap